<template>
  <div class="unity-body-div deviceDetails body-bg">
    <close @click.native="toClose"></close>
    <big-center-title :title="pageTitle"></big-center-title>
    <div class="unity-body-center-body-btn" style="height: calc(100% - 90px);">
      <div class="unity-body-center-left-btn">
        <div class="unity-body-center-left-btn-center">
          <div class="unity-body-center-left-tab">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane v-for="(item, ind) in watchTypeList"
                           :label="item.key_name"
                           :name="item.key_name" :key="ind"></el-tab-pane>
            </el-tabs>
          </div>
          <div class="unity-body-center-left-gun">
            <div class="unity-body-center" style="position: relative;"
                 v-loading='!islook'
                 element-loading-background="rgba(0, 0, 0, 0)">
              <div class="change_date">
                <div :class="index==datecheck?'choosedate':'change_date_item'"
                     v-for="(item,index) in alldate" @click="changeDate(index)">
                  {{ item.name }}
                </div>
              </div>
              <div class="chart" v-if="islook">
                <div style="width:100%;height:230px;z-index:9999999"
                     ref="main"
                     v-if="isShowGZ==false"></div>
                <div v-else class="guzhang" style="color: red;">
                  <!--                <div class="guzhang">-->
                 <!-- <el-image
                    style="width: 170px;height: 170px"
                    src="https://dongping.jnaw.top/dongping_static/guzhang.png"
                    fit="cover">
                  </el-image> -->
				  暂无数据
                </div>
              </div>
            </div>
            <div class="unity-body-center-right" style="margin-top:20px;"
                 v-if="monitorList.length > 0">
              <div class="unity-body-center-left-top">
                <div class="  color-gradient-blue_device"
                     style="width: 8px;height: 15px;border-radius: 2px;margin-right: 10px;"></div>
                <div class="" style="font-size: 18px;z-index:999">监测信息</div>
              </div>
            </div>
            <div class="unity-body-center_tablee" style="padding: 0  2.4vw;"
                 v-if="monitorList.length > 0">
              <el-row class="device-monitor-list">
                <el-col :span="12" v-for="(item, index) in monitorList"
                        :key="index">
                  <div v-if="index==0" style="display: flex;align-items: center;padding: 6px 33px;"
                       class="device-monitor-item" :class="{
                                        'no-border-bottom':
                                          (monitorList.length % 2 > 0 &&
                                            index == monitorList.length - 1) ||
                                          (monitorList.length % 2 == 0 &&
                                            index >= monitorList.length - 2)
                                      }">
                    设备状态：
                    <div
                      style="border-radius: 2px;width: 58px;text-align: center;padding: 1px 0px;"
                      :class="
                                                                (equipmentDetial.state == 0 && 'state1') ||
                                                                  (equipmentDetial.state == 1 && 'state2') ||
                                                                  (equipmentDetial.state == 2 && 'state3')
                                                              ">
                      {{ sbstate(equipmentDetial.state) }}
                      <!--                      {{ equipmentDetial.state }}-->
                    </div>
                  </div>
                  <div v-if="index>0" class="device-monitor-item" :class="{
                      'no-border-bottom':
                        (monitorList.length % 2 > 0 &&
                          index == monitorList.length - 1) ||
                        (monitorList.length % 2 == 0 &&
                          index >= monitorList.length - 2)
                    }">
                    {{ item.name }}：
                    <span v-if="
                        !item.hasOwnProperty('isCustom') ||
                          (item.hasOwnProperty('isCustom') && !item.isCustom)
                      ">
											{{ item.value }}
										</span>
                    <span
                      v-if="item.hasOwnProperty('isCustom') && item.isCustom">
											{{ item.value }}
										</span>
                  </div>
                </el-col>
              </el-row>
            </div>

            <div class="unity-body-center-right" style="margin-top:20px ;">
              <div class="unity-body-center-left-top">
                <div class="  color-gradient-blue_device"
                     style="width: 8px;height: 15px;border-radius: 2px;margin-right: 10px;"></div>
                <div class="" style="font-size: 18px;z-index:999">设备信息</div>
              </div>
            </div>
            <div class="unity-body-center_tablee"
                 style="min-height: 184px;padding: 0  2.4vw;">
              <table>
                <tr>
                  <td class="td1">
                    设备类型：{{ equipmentDetial.equipment_type_name || '--' }}
                  </td>
                  <td class="td2">
                    投运时间：
                    <!--                    {{ timezh(equipmentDetial.use_time) }}-->
                    {{ equipmentDetial.use_time || '--' }}
                  </td>
                </tr>
                <tr>
                  <td class="td1">
                    NFC编号：{{ equipmentDetial.nfc_code || '--' }}
                  </td>
                  <td class="td2">
                    责任人：{{ equipmentDetial.responsible_1 || '--' }}
                  </td>
                </tr>
                <tr>
                  <td class="td1">
                    设备编号：{{ equipmentDetial.it_code || '--' }}
                  </td>
                  <td class="td2">
                    联系方式：{{ equipmentDetial.responsible_phone_2 || '--' }}
                  </td>
                </tr>
                <tr>
                  <td class="td1">
                    设备型号：{{ equipmentDetial.it_number || '--' }}
                  </td>
                  <td class="td2">
                    购买时间：
                    <!--                    {{ timezh(equipmentDetial.buy_time) }}-->
                    {{ equipmentDetial.buy_time || '--' }}
                  </td>
                </tr>
                <!--                <tr>
                                  <td>
                                    安装位置：{{ addressData(equipmentDetial.install_position) }}
                                  </td>
                                </tr>-->


                <!--                <tr>
                                  &lt;!&ndash; <td class="td1">瞬时流量：{{equipmentDetial.instantaneous_flow}}</td> &ndash;&gt;
                                  <td class="td1">设备型号：{{ equipmentDetial.it_number }}</td>
                                  <td class="td2">
                                    安装位置：{{
                                      addressData(equipmentDetial.install_position)
                                    }}
                                  </td>
                                </tr>
                                <tr>
                                  <td class="td1">
                                    <div style="display: flex;align-items: center;">
                                      设备状态：
                                      <div
                                        style="border-radius: 2px;width: 58px;height: 24px;line-height: 24px;text-align: center;"
                                        :class="
                                          (equipmentDetial.state == 0 && 'state1') ||
                                            (equipmentDetial.state == 1 && 'state2') ||
                                            (equipmentDetial.state == 2 && 'state3')
                                        ">
                                        {{ sbstate(equipmentDetial.state) }}
                                      </div>
                                    </div>
                                  </td>
                                  <td class="td2">
                                    投运时间：{{ timezh(equipmentDetial.use_time) }}
                                  </td>
                                </tr>
                                <tr>
                                  <td class="td1">
                                    设备类型：{{ equipmentDetial.equipment_type_name }}
                                  </td>
                                  <td class="td2">
                                    责任人：{{ equipmentDetial.responsible_1 }}
                                  </td>
                                </tr>
                                <tr>
                                  <td class="td1">NFC编号：{{ equipmentDetial.nfc_code }}</td>
                                  <td class="td2">
                                    联系方式：{{ equipmentDetial.responsible_phone_2 }}
                                  </td>
                                </tr>
                                <tr>
                                  <td class="td1">设备编号：{{ equipmentDetial.it_code }}</td>
                                  <td class="td2">
                                    购买时间：{{ timezh(equipmentDetial.buy_time) }}
                                  </td>
                                </tr>-->
              </table>
              <div class="tb_td3"> 安装位置：
                <!--                {{ addressData(equipmentDetial.install_position) }}-->
                {{ equipmentDetial.install_position || '--' }}
              </div>
            </div>
            <!-- </div> -->


          </div>
        </div>
      </div>
      <div class="unity-body-center-right-btn">
        <Model3dShow v-bind:photoArr="photoArr" :cover_id_url='equipmentDetial.cover_id_url'></Model3dShow>
      </div>
    </div>
  </div>
</template>

<script>
import StringUtils from '../../utils/string'
import UnityIm from '../../utils/unityIm'
import bigCenterTitle from '@/components/unityweb/big-center-title'
import close from '@/components/unityweb/close'
import Model3dShow from '../components/model-3d-show.vue'

export default {
  name: 'deviceDetails',
  components: {
    bigCenterTitle,
    close,
    Model3dShow: Model3dShow
  },
  data() {
    return {
      pageTitle: '水位计',
      equipmentDetial: {},
      monitorList: [],

      monitorTypeObj: {}, //res.data
      activeName: '',
      watchTypeInd: 0,
      watchTypeObj: {
        key: '',
        id: -1,
        name: ''
      },
      watchTypeList: [],

      photoArr: [],
      //筛选条件
      alldate: [{
        type: 'hour',
        name: '1小时'
      },
        {
          type: 'day',
          name: '1天'
        },
        {
          type: 'week',
          name: '7天'
        },
      ],
      //对应下标
      datecheck: 0,
      //保存Id
      params: '',
      islook: true,
      isShowGZ: true,//是否故障
    }
  },
  created() {
    var _this = this

    // _this.u_getToken({
    //   site_id: 1,
    //   device_id: 7,
    //   device_type: 2,
    //   type: 2
    // });
    _this.u_getToken({
      id: 1
    })
  },
  mounted() {
    window.addEventListener('message', event => {
      //event.data获取传过来的数据
      let _obj = event.data
      let method_name = _obj.methodName || ''
      let paramsStr = _obj.parameterData || ''
      let params = StringUtils.toJson(paramsStr)
      if (_obj.managerType == 'open') {
        this.openHandler(method_name, params)
      } else if (_obj.managerType == 'close') {
      } else if (_obj.managerType == 'cancelSelected') {
      }
    })
    if (window.vuplex) {
      this.addMessageListener3()
    } else {
      // 初始化侦听器
      window.addEventListener('vuplexready', this.addMessageListener3)
    }
  },
  methods: {
    // TODO 告诉unity关闭网页
    toClose() {
      UnityIm.closePanelManager('waterLevel')
    },
    addMessageListener3() {
      UnityIm.receiveUnityOpenMessage((method_name, params) => {
        this.openHandler(method_name, params)
      })
    },
    openHandler(method_name, params) {
      switch (method_name) {
      case 'waterLevel':
        this.u_getToken(params)
        break
      }
    },

    handleClick(tab, event) {
      // console.log(tab.index);
      // console.log(this.watchTypeList[tab.index]);
      this.choose(this.watchTypeList[tab.index], tab.index)
    },
    // 选择的哪项
    choose(item, index) {
      // console.log("item:", item);
      // console.log("index:", index);
      this.Bac = index
      this.watchTypeInd = index
      this.watchTypeObj = item
      this.changer()
    },
    changer() {
      var _this = this
      this.chartDetial(
        this.monitorTypeObj[this.watchTypeInd],
        this.watchTypeObj.key_unit
      )
      console.log(this.monitorTypeObj[this.watchTypeInd])
      if (this.monitorTypeObj && this.monitorTypeObj[this.watchTypeInd] && this.monitorTypeObj[this.watchTypeInd].y_value.length < 0) {
        this.isShowGZ = true
      }
    },
    // 图表数据
    safe_realtime_history(params, isfilst = true) {
      var _this = this
      /*  _this.params = params
       var datas = {
         id: params.id,
         time: _this.alldate[_this.datecheck].type
       }
       // _this.$apis.u_device_date(datas).then(res => {
       _this.$apis.u_device_date_v3(datas)
         .then(res => {
           if (res.result == 0) {
             // var data = res.data;
             _this.monitorTypeObj = res.data
             _this.watchTypeList = _this.monitorTypeObj

             this.islook = true
             if (_this.watchTypeList.length != 0) {
               if (isfilst) {
                 // element的标签
                 _this.activeName = _this.watchTypeList[0].key_name
                 // console.log(_this.activeName)
                 // 某项
                 this.watchTypeInd = 0
                 this.watchTypeObj = _this.monitorTypeObj[this.watchTypeInd]
                   || []
                 // console.log(this.watchTypeObj);
               }
               _this.$nextTick(() => {
                 this.changer()
               })

             } else {
               let datas = {
                 x_value: [],
                 y_value: []
               }
               let unit = ''
               this.watchTypeObj = {
                 key_name: '',
                 key_unit: '',
                 key_value: '',
                 time: ''
               }
               _this.$nextTick(() => {
                 this.chartDetial(datas, unit)
               })

             }
           } else {
             let datas = {
               x_value: [],
               y_value: []
             }
             let unit = ''
             this.watchTypeObj = {
               key_name: '',
               key_unit: '',
               key_value: '',
               time: ''
             }
             this.chartDetial(datas, unit)
           }
         }) */
      var resdata = []
      if (_this.datecheck == 0) {
        resdata = [
          {
            'key_name': '水位',
            'key_value': '0.08',
            'key_unit': 'm',
            'has_warn': false,
            'time': '2023-11-15 11:01:06',
            'x_value': [
              /*  '10:06',
               '10:11',
               '10:16',
               '10:21',
               '10:26',
               '10:31',
               '10:36',
               '10:41',
               '10:46',
               '10:51',
               '10:56',
               '11:01' */
            ],
            'y_value': [
              /* '0.09',
              '0.09',
              '0.09',
              '0.09',
              '0.09',
              '0.09',
              '0.08',
              '0.08',
              '0.09',
              '0.09',
              '0.09',
              '0.08' */
            ]
          },
        ]
      } else if (_this.datecheck == 1) {
        resdata = [{
          'key_name': '水位',
          'key_value': '0.09',
          'key_unit': 'm',
          'has_warn': false,
          'time': '2023-11-15 11:30:36',
          'x_value': [
            /* '12',
            '13',
            '14',
            '15',
            '16',
            '17',
            '18',
            '19',
            '20',
            '21',
            '22',
            '23',
            '00',
            '01',
            '02',
            '03',
            '04',
            '05',
            '06',
            '07',
            '08',
            '09',
            '10',
            '11' */
          ],
          'y_value': [
            /*  '0.08',
             '0.09',
             '0.08',
             '0.07',
             '0.07',
             '0.07',
             '0.08',
             '0.08',
             '0.08',
             '0.08',
             '0.08',
             '0.08',
             '0.09',
             '0.09',
             '0.09',
             '0.09',
             '0.09',
             '0.09',
             '0.09',
             '0.09',
             '0.10',
             '0.09',
             '0.09',
             '0.09' */
          ]
        },]
      } else {

        resdata = [{
          'key_name': '水位',
          'key_value': '0.09',
          'key_unit': 'm',
          'has_warn': false,
          'time': '2023-11-15 11:25:24',
          'x_value': [
            /* '11-09',
            '11-10',
            '11-11',
            '11-12',
            '11-13',
            '11-14',
            '11-15' */
          ],
          'y_value': [
            /* '0.03',
            '0.07',
            '0.10',
            '0.18',
            '0.09',
            '0.09',
            '0.09' */
          ]
        }]
      }
      this.monitorTypeObj = resdata
      this.watchTypeList = resdata

      this.activeName = '水位'
      this.watchTypeInd = 0
      this.watchTypeObj = _this.monitorTypeObj[this.watchTypeInd]
      _this.$nextTick(() => {
        this.changer()
      })
    },
    //时间转换
    timezh(item) {
      let res = '--'
      if (!item) {
        return res
      }
      const date = item ? new Date(item) : new Date()
      var y = date.getFullYear()
      var m = date.getMonth() + 1
      m = m < 10 ? '0' + m : m
      var d = date.getDate()
      d = d < 10 ? '0' + d : d
      var h = date.getHours()
      h = h < 10 ? '0' + h : h
      var minute = date.getMinutes()
      minute = minute < 10 ? '0' + minute : minute
      var second = date.getSeconds()
      second = second < 10 ? '0' + second : second
      res = y + '-' + m + '-' + d
      return res
    },
    u_getToken(params) {
      var _this = this
      /* this.$apis.u_getToken()
        .then(res => {
          var token = res.data
          sessionStorage.setItem('token', token)
          _this.equipment_query(params)
          _this.equipment_list(params)
          _this.safe_realtime_history(params)
          _this.getMonitorListBy(params)
        }) */

      _this.equipment_query(params)
      _this.equipment_list(params)
      _this.safe_realtime_history(params)
      _this.getMonitorListBy(params)
    },
    getMonitorListBy(params) {
      /*     let data = {
            // equipment: params.device_id
            equipment: params.id
          }
          this.$apis.u_device_monitor_list(data)
            .then(res => {
              let resData = res.data || []
              // console.log(resData);
              let tempArr = resData.map(item => {
                return Object.assign(item, {
                  isCustom: false
                })
              })
              // console.log("monitor list==", tempArr);
              this.monitorList = tempArr
              let equipmentData = {
                state: this.equipmentDetial.state
              }
              this.monitorList.unshift(equipmentData)
            }) */
      this.monitorList = [
        {
          state: 0
        },
        {
          name: '水位',
          value: '--'
        }]
    },
    //设备状态
    sbstate(item) {
      switch (item) {
      case '0':
        return '正常'
        break
      case '1':
        // return '异常'
        return '未接入'
        break
      case '2':
        return '故障'
        break
      }
    },
    //获取详情
    equipment_query(params) {
      var _this = this
      /*     var datas = {
            // id: params.device_id
            id: params.id
          }
          _this.$apis.equipment_query(datas)
            .then(res => {
              if (res.result == 0) {
                _this.ids = res.data.id

                // 标题
                _this.equipmentDetial = res.data
                _this.pageTitle = _this.equipmentDetial.name || _this.pageTitle
              } else {
                _this.pageTitle = ''
                _this.equipmentDetial = {}
              }
            }) */
      // 标题
      _this.equipmentDetial = {
        state: '1',
        equipment_type_name: '水位计',
        use_time: '2023-10-18',
        nfc_code: 'nfc001',
        responsible_1: '李明',
        it_code: 'EQ001',
        responsible_phone_2: '15614241214',
        it_number: 'ITNUM001',
        buy_time: '2023-09-01',
        install_position: '东郭镇相岭村',
        cover_id_url: 'http://mahe.jnaw.top/mh/mhsk_photo/swj.jpg',
      }
      _this.pageTitle = '水位计'
    },
    // 详情右侧 旋转列表
    equipment_list(params) {
      var _this = this
      /*       var datas = {
              equipment: params.id
            }
            _this.$apis.u_equipment_panorama_list(datas)
              .then(res => {
                if (res.result == 0) {
                  if (res.data.length != 0) {
                    // url塞组件数组里
                    let newList = res.data.map(x => {
                      return x.url
                    })
                    _this.photoArr = newList
                  } else {
                    _this.photoArr = []
                  }
                } else {
                  _this.photoArr = []
                }
              }) */
      _this.photoArr = ['http://mahe.jnaw.top/mh/mhsk_photo/swj.jpg']
    },
    chartDetial(item, unit) {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      let myChart = this.$echarts.init(this.$refs.main)
      // 指定图表的配置项和数据
      let option = {
        //调整此处大小即可控制空白
        grid: { x: 60, y: 45, x2: 40, y2: 35 },
        xAxis: {
          type: 'category',
          name: this.alldate[this.datecheck].type == 'day' ? '时' : '',
          boundaryGap: false,
          data: item.x_value,
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.6)'
            }
          },
          axisLabel: {
            // rotate: 40,
            //x轴间隔显示
            interval: 'auto'
          }
        },
        dataZoom: [{
          type: 'slider', //滑动条型数据区域缩放组件
          realtime: true, //拖动时，是否实时更新系列的视图。如果设置为 false，则只在拖拽结束的时候更新。
          start: 0, //数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。
          //              end: 100,  // 数据窗口范围的结束百分比。范围是：0 ~ 100
          height: 100,
          endValue: 66, //数据窗口范围的结束数值。如果设置了 dataZoom-inside.end 则 endValue 失效
          fillerColor: 'rgba(255, 255, 255, 0)', // 滚动条颜色
          borderColor: 'rgba(255, 255, 255, 0)',
          handleSize: 0, // 两边手柄尺寸
          showDetail: false, // 拖拽时是否展示滚动条两侧的文字
          top: '96%', //组件离容器上侧的距离
          zoomLock: true // 是否只平移不缩放
          // moveOnMouseMove:true, //开启鼠标移动窗口平移
          // zoomOnMouseWheel :true, //开启鼠标滚轮缩放
        },
          {
            type: 'inside', //内置型数据区域缩放组件
            // start: 0,
            //              end: 100,
            endValue: 24, // 最多12个
            zoomOnMouseWheel: false, // 关闭鼠标滚轮缩放
            moveOnMouseWheel: false, // 开启鼠标滚轮窗口平移
            moveOnMouseMove: false // 开启鼠标移动窗口平移
          }
        ],
        yAxis: {
          type: 'value',
          // name: "m",
          name: unit,
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#BFBFBF'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#ccc'],
              width: 1,
              type: 'dashed'
            }
          }
          // axisLabel:{
          //   rotate:45,
          // },
        },
        tooltip: {
          // trigger: "item"
          trigger: 'axis',
          formatter: function (param) {
            // console.log(param[0]);
            var value = param[0]
            return (
              '<div style="font-size: 16px;"> ' +
              value.name +
              '：' +
              value.value +
              unit +
              '</div>'
            )
          }
        },

        label: {
          show: false,
          position: 'bottom',
          textStyle: {
            fontSize: 20
          }
        },
        textStyle: {
          color: '#fff'
        },

        series: [{
          type: 'line',
          smooth: true,//是否平滑曲线显示
          // barGap: 0,
          color: ['rgba(91,143,249,0.7)'],

          symbolSize: 0,
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: 'rgba(91,143,249,0.7)' // 0% 处的颜色
              },
                {
                  offset: 1,
                  color: 'rgba(91,143,249,0)' // 100% 处的颜色
                }
              ],
              global: false // 缺省为 false
            }
          },

          // yAxisIndex: 0,
          // data: _this.orderList,
          data: item.y_value
        }]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
    //切换小时/1天/7天
    changeDate(index) {
      this.datecheck = index
      /* var params = this.params
      if (!params) {
        return
      }
      this.islook = false
      this.safe_realtime_history(params, false) */
      this.safe_realtime_history('', false)
    },
    addressData(item) {
      if (item == null || item == '') {
        return '--'
      } else {
        var data = JSON.parse(item)
        return data.poiname
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import url("../../assets/css/unity.scss");

.unity-body-div {
  // padding: 0px 3vw;
  // padding-top: 35px;
  // padding-bottom: 35px;

  /*background: rgba(5, 15, 26, 0.5) !important;*/
  // padding: 0;
  padding: 0px 32px 8px 32px;
}

.unity-body-center {
  // margin-top: 12px;
  display: flex;
  width: 100%;
  box-sizing: border-box;
  height: 230px;
  align-items: center;
  justify-content: center;
  // padding: 11px 6.8vw;
  border: 1px solid rgba(255, 255, 255, 0.6);
  overflow: hidden;
  // height: 100%;

  .chart {
    width: 100%;
    height: 100%;
    z-index: 99999;
  }
}

.unity-body-center_tablee {
  margin-top: 12px;
  //display: flex;
  width: 100%;
  box-sizing: border-box;
  // height: 230px;
  align-items: center;
  //justify-content: center;
  // padding: 11px 6.8vw;
  border: 1px solid rgba(255, 255, 255, 0.6);
  overflow: hidden;
}

.unity-body-center-right {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.unity-body-center-left-top {
  // margin: 0 auto;
  display: flex;
  // flex-direction: column;
  align-items: center;

  font-size: 18px;
  font-family: siyuan_bold;
  font-weight: 500;
  color: #ffffff;
}

table {
  width: 100%;
  height: 100%;
  // border: 1px solid #000;
  // border: 1px dashed #000;
  border-collapse: collapse;
  box-sizing: border-box;
}

table tr:last-child td {
  //border-bottom: 0px;
  //box-sizing: border-box;
}

td,
.device-monitor-item {
  // padding: 8px 8px 8px 10vw;
  padding: 8px 8px 8px 33px;
  color: #ffffff;
  font-size: 14px;
}

td {
  align-items: center;
  // text-align: center;
  width: 50%;
  // min-height: 36.5px;
  // border: 1px solid red;
  box-sizing: border-box;
}

.td1 {
  border-bottom: 1px dashed rgba(255, 255, 255, 0.6);
  border-right: 1px dashed rgba(255, 255, 255, 0.6);
}

.td2 {
  border-bottom: 1px dashed rgba(255, 255, 255, 0.6);
  border-left: 1px dashed rgba(255, 255, 255, 0.6);
}

.tb_td3 {
  color: #ffffff;
  font-size: 14px;
  padding: 8px 8px 8px 33px;
}

.color-gradient-blue_device {
  // /*主色调 */
  // background: #3083ff;
  // /*IE浏览器中由主色#007238，到#018944的颜色渐变设置*/
  // background: -webkit-gradient(linear, left top, right bottom, color-stop(0, #3083ff), color-stop(1, #2dc1ff));
  // /*火狐浏览器中由主色#007238，到#018944的颜色渐变设置*/
  // background: -ms-linear-gradient(left, #3083ff, #2dc1ff);
  // /*谷歌浏览器中由主色#007238，到#018944的颜色渐变设置*/
  // background: -moz-linear-gradient(left bottom, #3083ff 0%, #2dc1ff 100%);
  // /*欧朋浏览器中由主色#007238，到#018944的颜色渐变设置*/
  // background: -o-linear-gradient(left, #3083ff, #2dc1ff);
  // /*filter:滤镜名（参数)*/
  // filter: progid:dximagetransform.microsoft.gradient(startColorStr='#3083ff', EndColorStr='#2dc1ff');
  // -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#2dc1ff',EndColorStr='#3083ff')";
  background: linear-gradient(-77deg, #2dc1ff 0%, #3083ff 99%);
}

.state1 {
  color: #41d12dff;
  border: 1px solid #41d12dff;
}

.state2 {
  color: #fcc70e;
  border: 1px solid #fcc70e;
}

.state3 {
  color: #ff4a53;
  border: 1px solid #ff4a53;
}

.unity-body-center-body-btn {
  display: flex;

  .unity-body-center-right-btn {
    //width: 290px;
    //height: 400px;
    //padding: 10px;
    width: 310px;
    height: 420px;
    overflow: hidden;
    position: relative;
    // left: 15px;
    left: 20px;
    top: 51px;
    border: 1px solid rgba(255, 255, 255, 0.6);
  }

  .unity-body-center-left-btn {
    // width: 100%;
    width: 567px;
    width: 575px;
    height: 100%;
    position: relative;
    // overflow: hidden;
  }

  .unity-body-center-left-btn-center {

    // position: absolute;
    // left: 0;
    // top: 0;
    // bottom: 0;
    // right: -5px;
    // padding-right: 5px;
    .unity-body-center-left-tab {
      height: 40px;
    }

    .unity-body-center-left-gun {
      position: absolute;
      left: 0;
      top: 40px;
      bottom: 0;
      right: -5px;
      padding-right: 5px;
      overflow-y: scroll;
      //tab距离
      margin-top: 12px;
    }

    .unity-body-center-left-gun::-webkit-scrollbar {
      width: 6px;
      border-radius: 3px;
      background-color: rgba(0, 0, 0, 0);
    }

    .unity-body-center-left-gun::-webkit-scrollbar-thumb {
      border-radius: 3px;
      // width: 0px;
      // height: 0px;
      /*主色调 */
      background: #3083ff;
      /*IE浏览器中由主色#007238，到#018944的颜色渐变设置*/
      background: -webkit-gradient(linear,
        left top,
        right bottom,
        color-stop(0, #3083ff),
        color-stop(1, #2dc1ff));
      /*火狐浏览器中由主色#007238，到#018944的颜色渐变设置*/
      background: -ms-linear-gradient(left, #3083ff, #2dc1ff);
      /*谷歌浏览器中由主色#007238，到#018944的颜色渐变设置*/
      background: -moz-linear-gradient(left bottom, #3083ff 0%, #2dc1ff 100%);
      /*欧朋浏览器中由主色#007238，到#018944的颜色渐变设置*/
      background: -o-linear-gradient(left, #3083ff, #2dc1ff);
      /*filter:滤镜名（参数)*/
      filter: progid:dximagetransform.microsoft.gradient(startColorStr='#3083ff', EndColorStr='#2dc1ff');
      -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#2dc1ff',EndColorStr='#3083ff')";
    }
  }

  // .unity-body-center-left-btn-center::-webkit-scrollbar {
  //   width: 6px;
  //   border-radius: 3px;
  //   background-color: rgba(0, 0, 0, 0);
  // }

  // .unity-body-center-left-btn-center::-webkit-scrollbar-thumb {
  //   border-radius: 3px;
  //   // width: 0px;
  //   // height: 0px;
  //   /*主色调 */
  //   background: #3083ff;
  //   /*IE浏览器中由主色#007238，到#018944的颜色渐变设置*/
  //   background: -webkit-gradient(
  //     linear,
  //     left top,
  //     right bottom,
  //     color-stop(0, #3083ff),
  //     color-stop(1, #2dc1ff)
  //   );
  //   /*火狐浏览器中由主色#007238，到#018944的颜色渐变设置*/
  //   background: -ms-linear-gradient(left, #3083ff, #2dc1ff);
  //   /*谷歌浏览器中由主色#007238，到#018944的颜色渐变设置*/
  //   background: -moz-linear-gradient(left bottom, #3083ff 0%, #2dc1ff 100%);
  //   /*欧朋浏览器中由主色#007238，到#018944的颜色渐变设置*/
  //   background: -o-linear-gradient(left, #3083ff, #2dc1ff);
  //   /*filter:滤镜名（参数)*/
  //   filter: progid:dximagetransform.microsoft.gradient(startColorStr='#3083ff', EndColorStr='#2dc1ff');
  //   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#2dc1ff',EndColorStr='#3083ff')";
  // }
}

.device-monitor-list {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  width: 100%;
}

/deep/ .device-monitor-list .el-col:nth-child(2n) .device-monitor-item {
  border-left: 1px dashed rgba(255, 255, 255, 0);
}

/deep/ .device-monitor-list .el-col:nth-child(2n-1) .device-monitor-item {
  border-right: 1px dashed rgba(255, 255, 255, 0.6);
  padding-right: calc(8px + 2.4vw);
}

.device-monitor-item {
  border-bottom: 1px dashed rgba(255, 255, 255, 0.6);
}

.device-monitor-item.no-border-bottom {
  border-bottom: unset;
}
</style>

<style lang="scss">
.deviceDetails {
  width: 100%;
  height: 100%;
  color: #fff;

  // element标签页样式修改
  .el-tabs__header {
    margin: 0 !important;
  }

  .el-tabs__item {
    color: #fff !important;
    font-size: 18px !important;
  }

  .el-tabs__active-bar {
    height: 3px !important;
  }

  .el-tabs__item.is-active {
    color: #fff !important;
  }

  .el-tabs__nav-next,
  .el-tabs__nav-prev {
    font-size: 20px !important;
    color: #fff !important;
    top: -2px !important;
  }

  .el-tabs__nav-wrap.is-scrollable {
    padding: 0 30px !important;
  }

  .el-tabs__active-bar {
    height: 4px !important;
    background: linear-gradient(-77deg, #2dc1ff 0%, #3083ff 99%) !important;
  }

  .el-tabs__nav-wrap::after {
    background: none !important;
  }

  .unity-body-center .chart {
    z-index: 1;
  }
}

.change_date {
  position: absolute;
  right: 0px;
  top: 9px;
  display: flex;
  z-index: 9999999999
}

.choosedate {
  width: 49px;
  height: 24px;
  margin-right: 9px;
  border-radius: 2px;
  font-weight: 400;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(37deg, #2DC1FF 0%, #3083FF 99%);
  border: 1px solid #0083FD;
}

.change_date_item {
  width: 49px;
  height: 24px;
  margin-right: 9px;
  border: 1px solid #0083FD;
  border-radius: 2px;
  font-weight: 400;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}

.guzhang {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
</style>
